<template>
  <div class="travel-page">
    <!-- Top Banner & Categories -->
    <div class="top-section">
      <div class="main-banner">
        <h3>周边游</h3>
        <p>发现周边宝藏去处</p>
      </div>
      <div class="category-cards">
        <el-card shadow="hover" class="category-card">
          <h4>跟团游</h4>
          <p>省钱省心,一站打卡</p>
          <el-button text bg>去看看 &rarr;</el-button>
        </el-card>
        <el-card shadow="hover" class="category-card">
          <h4>私家团</h4>
          <p>独立出行,行程可调</p>
          <el-button text bg>去看看 &rarr;</el-button>
        </el-card>
        <el-card shadow="hover" class="category-card">
          <h4>自由行</h4>
          <p>交通+酒店,随心组合</p>
          <el-button text bg>去看看 &rarr;</el-button>
        </el-card>
        <el-card shadow="hover" class="category-card">
          <h4>定制旅行</h4>
          <p>出行省心,乐享尽兴</p>
          <el-button text bg>去看看 &rarr;</el-button>
        </el-card>
      </div>
    </div>

    <!-- Main Content Area -->
    <div class="main-content">
      <!-- Left Sidebar -->
      <div class="left-sidebar">
        <el-card class="sidebar-menu">
            <ul>
                <li>热门推荐</li>
                <li>东北</li>
                <li>海南/福建</li>
                <!-- More items -->
            </ul>
        </el-card>
        <div class="sidebar-promo" id="promo-weekend">
          <h4>周末游</h4>
          <p>周末去哪儿玩</p>
          <el-button circle type="success">GO&gt;</el-button>
        </div>
         <div class="sidebar-promo" id="promo-family">
          <h4>亲子游</h4>
          <p>带娃的快乐省心之旅</p>
          <el-button circle type="warning">GO&gt;</el-button>
        </div>
      </div>

      <!-- Right Content -->
      <div class="right-content">
        <div class="content-section">
          <div class="section-header">
            <h3>周边游</h3>
            <div class="tabs">
              <span>上海</span><span>杭州</span><span>苏州</span>
            </div>
          </div>
          <el-row :gutter="20">
            <el-col :span="6" v-for="i in 8" :key="i">
              <el-card class="tour-card">
                <div class="tour-image-placeholder"></div>
                <div class="tour-info">
                  <p>张家界+天门山+芙蓉镇+凤凰古城</p>
                  <span class="price">¥1778</span>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>

         <div class="content-section">
          <div class="section-header">
            <h3>境内旅游</h3>
             <div class="tabs">
              <span>云南</span><span>四川</span><span>新疆</span>
            </div>
          </div>
          <el-row :gutter="20">
            <el-col :span="6" v-for="i in 4" :key="i">
               <el-card class="tour-card">
                <div class="tour-image-placeholder"></div>
                <div class="tour-info">
                  <p>大理+丽江+香格里拉6天5晚跟团游</p>
                  <span class="price">¥2222</span>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
        
        <!-- Cooperation Section -->
        <div class="content-section">
            <div class="section-header">
                <h3>目的地及景区合作</h3>
            </div>
            <div class="partner-logos">
                <span>logo</span><span>logo</span><span>logo</span><span>logo</span><span>logo</span>
            </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
</script>

<style scoped>
.travel-page {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
}
.top-section {
  margin-bottom: 20px;
}
.main-banner {
  height: 200px;
  background-color: #007bff;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 12px;
  /* Placeholder for the '周边游' banner image */
  background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
}
.category-cards {
  display: flex;
  gap: 20px;
  margin-top: 20px;
}
.category-card {
  flex: 1;
  text-align: center;
}
.main-content {
  display: flex;
  gap: 20px;
}
.left-sidebar {
  width: 220px;
  flex-shrink: 0;
}
.sidebar-menu {
  margin-bottom: 20px;
}
.sidebar-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.sidebar-menu ul li {
    padding: 10px 15px;
    cursor: pointer;
}
.sidebar-menu ul li:hover {
    background-color: #f0f8ff;
}
.sidebar-promo {
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    color: white;
}
#promo-weekend {
    background-color: #e0f8e0;
    color: #333;
}
#promo-family {
    background-color: #fff0e6;
    color: #333;
}

.right-content {
  flex: 1;
}
.content-section {
  margin-bottom: 30px;
}
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #0086f6;
  padding-bottom: 10px;
  margin-bottom: 20px;
}
.section-header h3 {
  margin: 0;
  font-size: 24px;
}
.section-header .tabs span {
    margin-left: 20px;
    cursor: pointer;
}
.tour-card {
  margin-bottom: 20px;
}
.tour-image-placeholder {
    height: 150px;
    background-color: #eee;
}
.tour-info {
    padding: 14px;
}
.tour-info .price {
    color: #ff6600;
    font-size: 20px;
    font-weight: bold;
}
.partner-logos {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
</style> 